<template>
    <div>
      <div>
        <Header ref="header"></Header>
      </div>
      <div class="main-body">
        <div class="main-content">
          <!---->
          <div>
            <Crumbs></Crumbs>
          </div>
          <div class="car-info">
            <div class="right right-module">
              <div>
                <VehicleRight @getevId="evId" :mo_id="moId" :cate="catename" :mo_name="moName" :ca_id="caId"></VehicleRight>
              </div>
            </div>
            <div class="answer_lo">
              <router-view>

              </router-view>
            </div>
            <div class="clear"></div>
          </div>
        </div>
      </div>
      <div>
        <Footer></Footer>
      </div>
    </div>
</template>
<script>
  import Header from './Header'
  import Footer from './Footer'
  import Crumbs from './Crumbs'
  import VehicleRight from './VehicleRight'
//  import store from './store/index.js'
  export default {
    name: 'revehicle',
    components: {
      'Header': Header,
      'Footer': Footer,
      'Crumbs': Crumbs,
      'VehicleRight': VehicleRight
    },
    data () {
      return {
      }
    },
    created: function () {
      this.verify()
    },
    activated: function () {
      this.verify()
    },
    update () {
      this.verify()
    },
    mounted: function () {
      this.$refs.header.skeysearch = this.skey
    },
    computed: {
      caId: function () {
        return ''
      },
      moId: function () {
        return ''
      },
      catename: function () {
        return ''
      },
      moName: function () {
        return ''
      }
    },
    methods: {
      evId: function (id, name) {
        this.$router.push('/Revehicle/AssessmentDetail?ev_id=' + id + '&cate=' + name + '测评')
      },
      goback: function () {
        let routeUrl = this.$router.resolve({
          path: '/'
        })
        window.open(routeUrl.href, '_self')
      },
      verify: function () {
        this.skey = decodeURI(this.$chaos.getQueryString('skey'))
      }
    }
  }
</script>
<style>
  .main-title span{
    cursor: pointer;
  }
  .blue_r{
    color: #528df5;
  }
</style>
<style scoped>
  .main-body {
    background: url(../../static/image/o_15.png) center top no-repeat;
    padding: 20px 0 50px;
  }
  .main-content {
    width: 1300px;
    margin: 0 auto;
  }
  .right {
    float: right;
  }
  .main-title .crumbs-icon{
    display: inline-block;
    width: 15px;
    height:15px;
    background-image: url("../../static/image/hierarchy-icon.png");
    background-size: 100% 100%;
    transform: translateY(2px);
    margin: 0 5px;
  }
  .main-title .current-position{
    color: #47A7FE;
  }
  .car-name{
    padding-top: 20px;
    font-size: 24px;
  }
  .car-info{
    padding-top: 20px;
  }
  .car-info .right-module{
    width: 289px;
  }
  .car-info .right-item .module-title{
    background: url("../../static/image/k_29.png") center center no-repeat;
    line-height: 60px;
    text-align: center;
    font-size: 18px;
  }
  .car-info .right-item .module-content{
    padding:10px 0;
  }
  .car-info .right-item .history .year{
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 3px;
    padding-top: 15px;
  }
  .car-info .right-item .history li{
    line-height: 40px;
    padding-left:20px;
    position: relative;
    font-size: 14px;
    color:#888;
  }
  .car-info .right-item .history li .dot{
    width:6px;
    height:6px;
    border-radius: 50%;
    background: #3D6AE6;
    position: absolute;
    left: 0;
    top: 17px;
  }
  .car-info .right-item .look-all{
    color: #000;
    font-size: 14px;
    text-align: right;
    padding-top: 10px;
  }
  .enter-arrow-icon{
    width:6px;
    height: 11px;
    display: inline-block;
    background-image: url("../../static/image/k_20.png");
  }
  .recommend li{
    padding-bottom: 10px;
  }
  .right-module-car{
    position: relative;
  }
  .right-module-car img{
    display: block;
    width:100%;
  }
  .right-module-car .car-cover{
    position: absolute;
    bottom:0;
    left:0;
    right: 0;
    line-height: 30px;
    padding: 0 10px;
    color: #fff;
    background: rgba(0,0,0,0.4);
    letter-spacing: 2px;
  }
  .recommend li .advantage{
    letter-spacing: 2px;
    line-height: 24px;
    padding-top: 15px;
    color: #666;
  }
  .recommend li>a{
    display: block;
  }
  .review .car-play{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .review .review-content{
    padding:10px 0;
    color: #666;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 2px;
  }
  .review h4{
    padding: 10px 0;
    font-size: 20px;
    font-weight: 100;
  }
  .review a{
    display: block;
  }
  .answer_lo{
    float: left;
    width:955px;
  }
</style>
